<template>
  <div class="xml_main">
    <Header></Header>
    <div :class="isAnalysis ?'url_param_content_analysis':'url_param_content'">
      <div class="url_param_input_div" >
        <el-input placeholder="请输入内容" v-model="input" size="medium" clearable @clear="clear">
          <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>

    <div v-show="isAnalysis" class="url_param_list" >
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="参数名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="data"
          label="参数值">
        </el-table-column>
      </el-table>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/views/tool/build/Header.vue'
import Footer from '@/views/tool/build/Footer.vue'


export default {
  name: "processXMLIndex",
  components: { Footer, Header},
  data() {
    return {
      input:'',
      isAnalysis:false,
      tableData: []
    }
  },
  methods: {
    handleSearch(){
      if (this.input == ''){
        this.$message.error(`请填写数据!`);
      }
      // 取?后的数据
      let params = this.input.split("?")[1];
      if (params==null||params.length<1){
        this.$message.error(`URL不正确!`);
      }
      // 拆分参数
      let paramsArray = params.split("&");
      if (paramsArray==null||paramsArray.length<1){
        this.$message.error(`参数解析失败!`);
      }
      this.tableData = []
      paramsArray.forEach(item => {
        let temp = item.split("=");
        if (temp==null||temp.length<1){
          this.$message.error(`参数解析失败!`);
        }
        // 判断是不是Unicode编码
        if(temp[1].indexOf("\\u") > -1){
          temp[1] = this.decodeUnicode(temp[1])
        }
        this.tableData.push({
          name:temp[0],
          data:temp[1]
        })
      })
      this.isAnalysis = true;
    },
    decodeUnicode(unicodeStr){
      // 去掉多余的下划线
      unicodeStr = unicodeStr.replace(/_/g, "");
      let chineseStr = '';
      for (let i = 0; i < unicodeStr.length; i += 6) {
        const unicode = unicodeStr.substr(i, 6);
        chineseStr += String.fromCharCode(parseInt(unicode.substr(2), 16));
      }
      return chineseStr
    },
    clear(){
      this.isAnalysis = false;
    }

  }
}
</script>

<style >
  .url_param_content{
    width: 80%;
    height: 100vh;
    margin: 10% auto;
    display: flex;
    justify-content: center;
  }
  .url_param_content_analysis{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .url_param_list{
    margin: 20px auto;
    width: 80%;
  }
  .url_param_input_div{
    margin-top: 15px;
    width: 80%;

  }
</style>
